<template>
    <div>
        <button @click="isShow=!isShow">隐藏/显示</button>
        <!-- vue中的动画需要使用一下标签包裹住才行 -->
        <transition name="hello" :appear="true">
            <h1 v-show="isShow">你好啊！</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        name:'Test',
        data() {
            return {
                isShow:true
            }
        }
    }
</script>

<style scoped>
    h1{
        background-color: orange;
        text-align: center;
    }

    /* 注意vue的动画的class属性名称的命名是有要求的不能随意取 */
    .hello-enter-active{
        /* 播放那个动画和播放多久 */
        animation: atguigu 5s;
    }

    .hello-leave-active{
        /* 最后一个参数为动画反转 */
        animation: atguigu 5s reverse;
    }

    /* 使用原生的css编写一个动画 */
    @keyframes atguigu {
        /* 定义从哪里来 */
        from{
            /* 设置x轴坐标 */
            transform: translateX(-100%);
        }
        /* 设置在那里消失 */
        to{
            transform: translateX(100%)
        }
    }
</style>